<template>
  <el-card class="box-card" style="width: 100%;">
    <template #header>
      <div class="card-header">
        <el-button type="primary" @click="test">新增</el-button>
        <span>流程部署</span>
      </div>

    </template>

    <el-table :data="deployData" style="width: 100%" >
      <el-table-column prop="id" label="流程定义id" width="180" />
      <el-table-column prop="key" label="流程定义key" width="180" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="deploymentId" label="发布id" />
      <el-table-column prop="version" label="版本号" />
      <el-table-column prop="suspensionState" label="状态">
        <template #default="scope">
          <span :style="[scope.row.suspensionState ===1 ?'color: #409EFF;':'color: #F56C6C;']" >{{scope.row.suspensionState==1?'已激活':'已挂起'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="XML" >
        <template #default="scope">
          <el-button type="warning" text @click="xmlSelect(scope.row)">查看XML</el-button>

        </template>
      </el-table-column>
      <el-table-column prop="address" label="流程图" >
        <template #default="scope">
          <el-button text type="success" @click="flowSelect(scope.row)">查看流程图</el-button>


        </template>
      </el-table-column>
      <el-table-column prop="id" label="操作" width="200" >
      <template #default="scope">
        <el-button @click="hangUp(scope)"><span  >{{ scope.row.suspensionState ==1 ? "挂载":"激活" }}</span></el-button>
        <el-button type="danger" @click="open(scope.row)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
  </el-card>
  <InsertDeploy v-model:dialogVisible="dialogVisible" ></InsertDeploy>
  <ImgDeploy v-model:dialogVisibleIMG="dialogVisibleIMG" ></ImgDeploy>

</template>

<script setup lang="ts">
import ImgDeploy from "../flowable/submit_window/ImgDialog.vue";
import InsertDeploy from "./submit_window/InsertDeploy.vue";
import { ElNotification , ElMessage, ElMessageBox} from 'element-plus'
import {onBeforeMount, reactive, ref, watch,inject,h } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter();
let dialogVisible = ref(false)
watch(dialogVisible, (val, old) => {
  dialogVisible.value = val
})

const open = (data) => {
  ElMessageBox.confirm(
      '你是否要删除',
      '流程部署',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deleteFlow(data);
  }).catch(() => {

      })
}
//提示框
const open1 = (title,content) => {
  ElNotification({
    title: title,
    message: h('i', { style: 'color: teal' }, content),
  })
}
const test = ()=>{
  dialogVisible.value=  true
}
//实现挂起操作的方法
const hangUp = (data)=>{
  const id =data.row.id
  const url = `http://localhost:9899/deploy/hangup/${id}`;
  axios.get(url).then((ref)=>{
    const data = ref.data
    if(data.data){
      window.location.reload();
    }else{
      window.location.reload()
    }
  })
}
// 这是流程图和xml的对象
let dialogVisibleIMG = ref({
  img :false
,  imageFlow:"",
  ifelse :0

})
watch(dialogVisibleIMG, (val, old) => {
  dialogVisibleIMG.value = val
})
const deployData =ref([]);
//生命周期
onBeforeMount(()=>{
  deploy();
  const url = "http://localhost:1688/deploy/allDeployment"
  axios.get(url).then((ref)=>{
    const data = ref.data.data
    console.log(data)
  })
})
//查询所有的流程部署
function  deploy(){
  const url = "http://localhost:1688/deploy/allDeploy"
  axios.get(url).then((ref)=>{
    const data = ref.data.data
    deployData.value= ref.data.data
  })
}
// 查询xml 的事件
const xmlSelect = (data)=>{
  const id =data.deploymentId
  const url = `http://localhost:1688/deploy/querXml/${id}`;
  axios.get(url).then((ref)=>{

    let data = {
      img : true,
      imageFlow: ref.data.data,
      ifelse:2
      ,tetle:"部署xml"
    }
    dialogVisibleIMG.value = data
    console.log(ref.data.data)
  })

}
//删除事件
const deleteFlow=(data)=>{
  const id =data.deploymentId
  const url = `http://localhost:1688/deploy/deleteDeploy/${id}`;
  axios.get(url).then((ref)=>{
    if(ref.data.data){
      deploy();
      open1("流程","删除成功")
    }else{
      open1("流程","删除失败")
    }
  })
}
// 查询流程图的事件
const  flowSelect=(data)=>{
  const id =data.deploymentId
  const url = `http://localhost:9899/deploy/queryFlow/${id}`;
  axios.get(url).then((ref)=>{
    if(ref.data.data ==null){
      open1("流程图","该流程没有流程图")
    }else{
    let data = {
      img : true,
      imageFlow: 'data:image/png;base64,'+ref.data.data,
      ifelse:1
      ,tetle:"部署图片"
    }
    // dialogVisibleIMG.value.imageFlow = 'data:image/png;base64,'+ref.data.data;
    // dialogVisibleIMG.value.img = true;
    dialogVisibleIMG.value = data
    console.log(dialogVisibleIMG)
    }
  })
}

</script>
<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fontclass {
  color: #409EFF;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>
